<!--
 * @Date: 2023-03-17 12:59:40
 * @LastEditTime: 2023-03-18 12:12:22
 * @FilePath: /hua-fei-chong-zhi/src/views/topUpPhone/components/topUpPhoneLogs.vue
 * 介绍:
-->
<script lang="ts" setup>
import { apiPhoneTopUp, PhoneTopUp } from "@@apiModule/pagingList";
import dayjs from "dayjs";
import { CtagEmun } from "@@/components/common/Ctag";
const { t } = useI18n();
const statusEmun = reactive<CtagEmun>([
  {
    text: t("cheng-gong"),
    value: 1,
    style: {
      backgroundColor: "var(--C-success)",
    },
  },
  {
    text: t("shi-bai"),
    value: 2,
    style: {
      backgroundColor: "var(--C-fail)",
    },
  },
  {
    text: t("dai-que-ren"),
    value: 0,
    style: {
      backgroundColor: "var(--C-await)",
    },
  },
]);
</script>

<template>
  <Ccard>
    <template #header>
      <h3>{{ $t('li-shi-chong-zhi-ji-lu') }}</h3>
      <CpagingList :api="apiPhoneTopUp" min-height="500rem" class="mt-md">
        <template #header>
          <div class="list_header gridVar--col">
            <div>{{ $t('ri-qi') }}</div>
            <div>{{ $t('shou-ji-hao') }}</div>
            <div>{{ $t('jin-e') }}</div>
            <div>{{ $t('zhuang-tai') }}</div>
          </div>
        </template>
        <template #item="{ item }: { item: PhoneTopUp.ResItem }">
          <div class="list_item T-S-sm mt-md gridVar--col">
            <div>
              {{ dayjs(item.created_at).format("MM-DD HH:mm") }}
            </div>
            <div>
              {{ item.mobile }}
            </div>
            <div>
              <Ctag>{{ item.number }}</Ctag>
            </div>
            <div>
              <Ctag :enum="statusEmun" :value="item.status" />
            </div>
          </div>
        </template>
      </CpagingList>
    </template>
  </Ccard>
</template>

<style lang="less" scoped>
.list_header {
  --col: 4;
}

.list_item {
  --col: 4;
}
</style>
